<template>
  <div class="container_slide">

    <el-button type="primary" size="small" style="margin:20px 20px" @click="renew">
      更新幻灯片
      <i class="el-icon-upload el-icon--right"></i>
    </el-button>

    <div class="slide_box">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in list" :key="item.id">
          <h3 class="small">
            <el-image
                style="width: 800px; height: 300px"
                :src="item.url">
            </el-image>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="slide_middle">
      <el-upload
          class="upload-demo"
          action="http://localhost:9000/api/file/oss"
          :on-success="successBtn"
          :before-remove="beforeRemove"
          :on-remove="handleRemove"
          multiple
          :file-list="urls"
          :limit="3">
        <el-button size="small" type="primary">上传OSS</el-button>
        <div slot="tip" class="el-upload__tip">只能上传图片文件！</div>
      </el-upload>

    </div>

  </div>

</template>

<script>
import {renewSlide, showSlide} from "@/api/sys/banner";

export default {
  data(){
    return{
      list:[],
      urls:[]
    }
  },
  created() {
    this.querySlide()
  },
  methods:{
    async querySlide(){
      const {data:res}  = await showSlide()
      this.list = res.data.list
    },
    successBtn(response, file, fileList){
      this.urls.push(response)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    async renew(){
      const {data:res} = await renewSlide(this.urls)
      if (res.code === 200 ){
        this.$message({
          message: '更新幻灯片信息成功！',
          type: 'success'
        });
        await this.querySlide()
        this.urls = []
      }else {
        this.$message.error('更新幻灯片信息失败！');
      }

    },
    handleRemove(file, fileList) {
      const url = file.response
      let arr = []
      this.urls.forEach(obj=>{
        if (obj !== url){
          arr.push(obj)
        }
      })
      this.urls = arr
    },


  }
}
</script>

<style scoped>
.slide_box{
  margin:50px 30%;
}
.slide_middle{
  margin:30px 570px;
}
</style>
